<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Success Alert with Redirect</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script th:inline="javascript">
        /*<![CDATA[*/
        document.addEventListener('DOMContentLoaded', function () {
            // Check if success message exists
            const successMessage = [[${successMessage}]];
            const redirectUrl = [[${redirectUrl}]];
            const delay = 2000;

            if (successMessage) {
                // Show success alert
                const alertDiv = document.getElementById('successAlert');
                alertDiv.classList.remove('hidden');

                // Start countdown for redirect
                if (redirectUrl) {
                    let secondsLeft = delay / 1000;
                    const countdownElement = document.getElementById('countdown');

                    // Update countdown every second
                    const countdownInterval = setInterval(() => {
                        secondsLeft--;
                        countdownElement.textContent = secondsLeft;

                        if (secondsLeft <= 0) {
                            clearInterval(countdownInterval);
                            window.location.href = redirectUrl;
                        }
                    }, 1000);
                }
            }
        });
        /*]]>*/
    </script>
    <style>
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        .fade-out {
            animation: fadeOut 0.5s ease-in-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        .progress-bar {
            height: 4px;
            background-color: #4ade80;
            animation: progressBar linear;
            animation-duration: 2s;
        }

        @keyframes progressBar {
            from {
                width: 100%;
            }
            to {
                width: 0;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full">
    <!-- Success Alert (hidden by default) -->
    <div id="successAlert" class="hidden bg-white rounded-lg shadow-lg overflow-hidden fade-in">
        <div class="flex items-start p-4">
            <div class="flex-shrink-0">
                <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                </div>
            </div>
            <div class="ml-3 w-0 flex-1 pt-0.5">
                <h3 class="text-lg font-medium text-gray-900"
                    th:text="${successTitle != null} ? ${successTitle} : 'Success!'"></h3>
                <p class="mt-1 text-sm text-gray-500" th:text="${successMessage}"></p>

                <!-- Countdown and progress bar (only shown if redirectUrl exists) -->
                <div th:if="${redirectUrl}" class="mt-4">
                    <div class="progress-bar"></div>
                    <p class="text-xs text-gray-500 mt-2">
                        <span id="countdown">2</span>
                        秒后自动跳转
                        <a th:href="${redirectUrl}" class="text-green-600 hover:text-green-800 font-medium ml-1">立即跳转</a>
                    </p>
                </div>
            </div>
            <div class="ml-4 flex-shrink-0 flex">
                <button onclick="document.getElementById('successAlert').classList.add('fade-out')"
                        class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none">
                    <span class="sr-only">Close</span>
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Check URL parameters for demo
    document.addEventListener('DOMContentLoaded', function () {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('successMessage')) {
            // Create a mock Thymeleaf context for the demo
            window.thymeleafMock = {
                successMessage: urlParams.get('successMessage'),
                redirectUrl: urlParams.get('redirectUrl'),
                redirectDelay: parseInt(urlParams.get('redirectDelay')) || 3000,
                successTitle: 'Operation Successful'
            };

            // Trigger the alert display
            const event = new Event('DOMContentLoaded');
            document.dispatchEvent(event);
        }
    });
</script>
</body>
</html>